<!-- 设置模块 -->
<!-- <div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> -->
<div class="modal-dialog" id="setWindow">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
            </button>
            <h3 id="myModalLabel">设置</h3>
        </div>
        <div class="modal-body">
            <div class="row">
                <div style="width: 90%; margin: 0 auto; margin-bottom: 20px;">
                    <div class="form-group">
                        <div id="upImage" style="position: relative;border: 5px solid lightblue;width: 150px;height:150px;margin: 5px auto;border-radius: 50%;">
                            <img :src="user.uimage" alt="选择并上传头像" style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;" />
                            <input type="file" id="avatar_file" accept="image/*" title="选择新头像"
                                style="cursor:pointer;width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="input-group">
                            <span class="input-group-addon">用户昵称:</span>
                            <input class="form-control" v-model="user.nickName" @keyup="nickName;" placeholder="用户昵称[1-12]">
                            <span class="input-group-addon" :class="{notgo:verify.nickName}">★</span>
                        </span>
                    </div>
                    <div class="form-group">
                        <span class="input-group">
                            <span class="input-group-addon">个性签名:</span>
                            <input class="form-control" v-model="user.myinfo" @keyup="myinfo;" placeholder="个性签名[0-50]">
                            <span class="input-group-addon" :class="{notgo:verify.myinfo}">★</span>
                        </span>
                    </div>
                    <div class="form-group">
                        <span class="input-group">
                            <span class="input-group-addon">常用邮箱:</span>
                            <input class="form-control" v-model="user.email" @keyup="email;" placeholder="常用邮箱">
                            <span class="input-group-addon" :class="{notgo:verify.email}">★</span>
                            <!-- :class="{notgo:verify.phone}" -->
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:;" @click="updata()" class="userinfo-submit btn btn-success ">保存</a>
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
        </div>
    </div>
</div>
<!-- </div> -->

<script type="text/javascript">
    var setWindow = new Vue({
        el: "#setWindow",
        data: {
            //列表集合
            user: {},
            imageData: null,
            //校验信息
            verify: {
                nickName: false,
                myinfo: false,
                email: false,
            }
        },
        methods: {
            updata() {
                var boo = false;
                // TODO 校验
                for (var k in this.verify) {
                    if (this.verify[k]) {
                        layer.open({
                            title: '提示',
                            content: "请按照要求填写信息!",
                            btn: ['我知道了']
                        });
                        return;
                    }
                }
                if (this.imageData) {
                    let param = new FormData(); //创建form对象
                    param.append('imgfile', this.imageData);//通过append向form对象添加数据

                    for (k in this.user) {
                        param.append(k, this.user[k]);
                    }
                    //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                    // console.log(param.get('file')); 
                    //添加请求头
                    let config = {
                        headers: { 'Content-Type': 'multipart/form-data' }
                    };
                    //请求带信息
                    updataUserInfo(param, config).then(response);
                } else {
                    updataUserInfo(this.user).then(response);
                }

                function response(res) {
                    errInfo(res, true);
                    if (res.data.errno == 0) {
                        //重新获取用户信息
                        vm.user = res.data.data;
                    }
                }
            }
        },
        computed: {
            nickName() {
                let i = this.user.nickName.length;
                let boo = i < 1 || i > 12;
                this.verify.nickName = boo;
                return boo;
            },
            myinfo() {
                let i = this.user.myinfo.length;
                let boo = i > 50;
                this.verify.myinfo = boo;
                return boo;
            },
            email() {
                if (!this.user.email) {
                    this.verify.email = false;
                    return false;
                }
                var reg = new RegExp(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/);
                var b = !reg.test(this.user.email);
                this.verify.email = b;
                return b;
            }
        }
    })
    // 头像预览
    $("#avatar_file").change(function () {
        // 获取上传文件对象
        var file = $(this)[0].files[0];
        setWindow.imageData = file;
        // 读取文件URL
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // 阅读文件完成后触发的事件
        reader.onload = function () {
            // 读取的URL结果：this.result
            setWindow.user.uimage = this.result;
            // $("#avatar_img").attr("src", this.result);
        }
    });



</script>